<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul,i{margin:0;padding:0;}
			body{background-color: #eee;}
			ul{list-style:none;}
			a{text-decoration:none;}
			.wrap{
				margin:0 auto;
				max-width:540px;
				min-width:320px;
				height:186px;
				font-size:12px;
			}
			.wrap li{
				display:flex;
		/* 		height:60px; */
			}
			.wrap li a{
				background-color: #fff;
				margin:0 1px 1px 0;
				padding:12px;
				height:48px;
				text-align:center;
				color:#000;
				/* flex-grow:1;
				flex-shrink:1;
				flex-basis:auto; */
				flex:1 auto;
			}
			.wrap li a:last-child{
				margin-right:0;
			}
			.wrap li:nth-child(2) a{
				width:134.25px;
			}
			.wrap li a i{
				display:block;
				width:20px;
				height:20px;
				background-image: url('nav.png');
				background-size:20px auto;
				margin:0 auto;
			}
			.wrap li:nth-child(1) a:nth-child(1) i{
				background-position: 0px -79px;
			}
			.wrap li:nth-child(1) a:nth-child(2) i{
				background-position: 0px -100px;
			}
			.wrap li:nth-child(1) a:nth-child(3) i{
				background-position: 0px -119px;
			}
			.wrap li:nth-child(1) a:nth-child(4) i{
				background-position: 0px -139px;
			}
			.wrap li:nth-child(2) a:nth-child(1) i{
				background-position: 0px 85px;
			}
			.wrap li:nth-child(2) a:nth-child(2) i{
				background-position: 0px 65px;
			}
			.wrap li:nth-child(2) a:nth-child(3) i{
				background-position: 0px 45px;
			}
			.wrap li:nth-child(2) a:nth-child(4) i{
				background-position: 0px 25px;
			}
			.wrap li:nth-child(3) a:nth-child(1) i{
				background-position: 0px 0px;
			}
			.wrap li:nth-child(3) a:nth-child(2) i{
				background-position: 0px -19px;
			}
			.wrap li:nth-child(3) a:nth-child(3) i{
				background-position: 0px -39px;
			}
			.wrap li:nth-child(3) a:nth-child(4) i{
				background-position: 0px -59px;
			}
		</style>
	</head>
	<body>
			<ul class="wrap">
				<li>
					<a href="#">
						<i></i>
						<span>自由行</span>
					</a>
					<a href="#">
						<i></i>
						<span>主题游</span>
					</a>
					<a href="#">
						<i></i>
						<span>一日游</span>
					</a>
					<a href="#">
						<i></i>
						<span>顶级游</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i></i>
						<span>酒店+景点</span>
					</a>
					<a href="#">
						<i></i>
						<span>亲子*游学</span>
					</a>
					<a href="#">
						<i></i>
						<span>外币兑换</span>
					</a>
					<a href="#">
						<i></i>
						<span>加盟合作</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i></i>
						<span>低价拼单</span>
					</a>
					<a href="#">
						<i></i>
						<span>机场停车</span>
					</a>
					<a href="#">
						<i></i>
						<span>旅游巴士</span>
					</a>
					<a href="#">
						<i></i>
						<span>更多服务</span>
					</a>
				</li>

			</ul>
	</body>
</html>
